<template>
	<view class="chang-number">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="设置手机号" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='设置手机号' :showButtonMore="false"></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<input v-model="phoneNumber_input" @input="DeterMineWeatherToModify()" placeholder="请输入您的手机号码" />
			<view class="text">上传你的手机通讯录后，可了解通讯录中哪些朋友注册了账号。</view>
			<view class="button" :class="{'active':active_submit}" @tap="submit()">保存</view>
		</view>
	</view>
</template>

<script>
	// 导入云对象
	const userInfo = uniCloud.importObject('userInfo', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				userInfo: {},
				phoneNumber_input: '',

				// 标识变量
				active_submit: false,
			}
		},
		onLoad() {
			const app = getApp();
			const userInfo = app.userInfo;
			this.phoneNumber_input = userInfo.phoneNumber;
			this.userInfo = userInfo;
		},
		methods: {
			/** 确认修改昵称
			 * 
			 */
			submit() {
				console.log('保存');
				if (this.active_submit) {
					console.log('已经激活');
					this.userInfo.phoneNumber = this.phoneNumber_input;
					userInfo.ModifyphoneNumber(this.userInfo).then(res => {
						console.log(res);
						if (res.success) {
							console.log('修改成功');
							uni.navigateBack();
						}
					});
				} else {
					console.log('未激活');
				}
			},
			/** 判断是否修改昵称
			 * 
			 */
			DeterMineWeatherToModify() {
				console.log('判断是否修改了手机号');
				if (this.phoneNumber_input == this.userInfo.phoneNumber) {
					console.log('未修改手机号');
					this.active_submit = false;
				} else {
					console.log('已经修改手机号');
					this.active_submit = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	input {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 100rpx;
		border-bottom: 3rpx solid rgba(0, 0, 0, 0.2);
		font-size: $font-size-l-m;
	}

	.text {
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		color: rgba(0, 0, 0, 0.5);
	}

	.button {
		position: fixed;
		top: 10rpx;
		right: 30rpx;
		width: 100rpx;
		height: 70rpx;
		display: flex;
		background-color: rgba(0, 0, 0, 0.4);
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		color: white;
		font-size: $font-size-m-m;
	}

	.button.active {
		background-color: rgba(88, 190, 106, 1);
	}
</style>